<template>
  <div class="mt16">
    <!-- 页头 基础信息 -->
    <el-row class="page-header">
      <el-row type="flex" align="middle">
        <el-col :xs="10" :sm="20" :md="15" :lg="16" class="page-header-title ">
          <svg-icon style="font-size:40px;" icon-class="customer_detail" />
          <p class="textOverFlow">{{ dataSource.name }}</p>
        </el-col>
        <el-col :xs="14" :lg="8" class="text-right">
          <el-button-group>
            <el-button icon="el-icon-edit" @click="handleEdit(dataSource)" />
            <el-button icon="el-icon-connection" @click="handleAssign" />
            <el-dropdown trigger="click">
              <el-button class="border-left" icon="el-icon-more-outline" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleForzen">冻结</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row type="flex" class="page-header-main">
        <el-col :xs="24" :lg="13">
          <el-row class="page-header-main-desc" :gutter="48">
            <el-col :xs="24" :sm="12">
              <label>公司法人：</label>
              <span>{{ dataSource.legalPerson }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>注册资金：</label>
              <span>{{ dataSource.registeredCapital }}万</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>成立日期：</label>
              <span>{{ dataSource.incorporationDate }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>企业规模：</label>
              <span>{{ dataSource.scale_dictText }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>客户来源：</label>
              <span>{{ dataSource.source_dictText }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>上云情况：</label>
              <span>{{ dataSource.transportation_dictText }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>所属行业：</label>
              <span>{{ dataSource.industry_dictText }}</span>
            </el-col>
            <el-col :xs="24" :sm="12">
              <label>地区：</label>
              <span>{{ dataSource.region_dictText }}</span>
            </el-col>
            <el-col :xs="24" :sm="12" class="textOverFlow">
              <label>地址：</label>
              <el-tooltip :content="dataSource.address" placement="top">
                <a>{{ dataSource.address }}</a>
              </el-tooltip>
            </el-col>
            <el-col :xs="24" :sm="12" class="textOverFlow">
              <label>备注：</label>
              <el-tooltip :content="dataSource.remark || '无'" placement="top">
                <a>{{ dataSource.remark || '无' }}</a>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-col>
        <el-col :xs="0" :sm="4" :md="8" :lg="11" class="page-header-main-status text-right">
          <p>客户级别</p>
          <p>重要</p>
        </el-col>
      </el-row>
    </el-row>

    <!-- 标签页 -->
    <el-row class="page-header-footer">
      <el-col :span="24">
        <el-tabs v-model="activeName">
          <!-- 信息化投入现状 -->
          <el-tab-pane label="基本信息" name="first">
            <information-table />
          </el-tab-pane>
          <!-- 联系人 -->
          <el-tab-pane label="使用情况" name="second">
            <usage-table />
          </el-tab-pane>
          <!-- 跟进记录 -->
          <el-tab-pane label="跟进记录" name="third">
            <record-table />
          </el-tab-pane>
          <!-- 使用情况 -->
          <el-tab-pane label="联系人" name="fourth">
            <link-table />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 新增 -->
    <details-drawer ref="details" :show.sync="details.open" @close="getList" />
    <!-- 指派 -->
    <assgin-drawer :show.sync="assgin.open" @close="getList" />
    <!-- 回到顶部 -->
    <el-backtop :right="12" />
  </div>
</template>

<script>
import InformationTable from './components/informationTable'
import DetailsDrawer from './modules/detailsDrawer'
import LinkTable from './components/linkTable'
import RecordTable from './components/recordTable'
import UsageTable from './components/usageTable'
import AssginDrawer from './modules/assginDrawer'
export default {
  name: 'Detail',
  components: {
    InformationTable,
    DetailsDrawer,
    LinkTable,
    RecordTable,
    UsageTable,
    AssginDrawer
  },
  data() {
    return {
      // 编辑
      details: {
        open: false
      },
      // 指派
      assgin: {
        open: false
      },
      // 默认标签页
      activeName: 'first',
      dataSource: {
        scale_dictText: '500人-1000人',
        source_dictText: '自主查找',
        transportation_dictText: '部分上云',
        industry_dictText: '制造业',
        isFrozen_dictText: '否',
        code: 'KH2021050051',
        scale: '61',
        industry: '11',
        remark: '',
        source: '41',
        status_dictText: '否',
        delFlag: 0,
        registeredCapital: '30000',
        updateBy: null,
        legalPerson: '丁俊洋',
        isNew_dictText: '否',
        id: '1389878925278040065',
        incorporationDate: '2003-11-20',
        situation: null,
        owner: '',
        address: '洛城街道豪源路9号蔬菜大厦3号楼1单元502',
        updateTime: null,
        isNew: 0,
        region_dictText: '寿光市',
        createBy_dictText: '高元刚',
        transportation: '11',
        situation_dictText: null,
        createBy: '13081662294',
        createTime: '2021-05-05',
        name: '山东省寿光蔬菜产业集团有限公司',
        sysOrgCode: 'A01A31',
        region: '1379724257884708866',
        status: '0'
      }
    }
  },
  methods: {
    getList() {},
    handleEdit(row) {
      this.details.open = true
      this.$refs.details.edit(row)
    },
    // 指派
    handleAssign() {
      this.assgin.open = true
    },
    // 冻结
    handleForzen() {
      this.$confirm('冻结操作不可撤销，是否确定？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    }
  }
}
</script>

<style lang='scss' scoped>
@import '~@/assets/styles/details.scss';
</style>
